<template>
  <div>
    <div class="json">
      <p>这又是什么？</p>
      <p>这是一个中文分词API调用的一个组件，您可以在下面输入任何短语，文本进行分词，分词以json的形式展开</p>
    </div>
    <el-input placeholder="请输入句子或短语，如 烹饪时间 < 10分钟" v-model="textarea">
      <el-button-group slot="append">
        <el-button @click="analyzer">分词</el-button>
        <el-button @click="clear">
          清空
        </el-button>
      </el-button-group>
    </el-input>
    <div class="json" ref="jsonViewer">

    </div>
  </div>
</template>

<script>
import JSONFormatter from 'json-formatter-js';
import { wordAnalyzer } from '../../api/elasticApi';
export default {
  methods: {
    clear() {
      this.$refs.jsonViewer.innerHTML = '';
    },
    analyzer() {
      if (this.textarea.trim() === '') {
        return;
      }
      wordAnalyzer(this.textarea)
        .then(res => {
          // console.log(res.data);
          this.checkTimer(res.data.tokens);
          const formatter = new JSONFormatter(res.data);
          this.$refs.jsonViewer.appendChild(formatter.render());
        })
        .catch(err => {
          this.$notify.error({
            title: '错误',
            message: err
          });
        });
    },
    checkTimer(tokens) {
      tokens.map(token => {
        // console.log(token);
        if (token['type'] === 'TYPE_CQUAN') {
          this.$notify({
            title: '提示',
            message: `已找到一个时间短语，是 ${token['token']}`,
            duration: 10000
          });
        }
      });
    }
  },
  data() {
    return {
      textarea: ''
    };
  }
};
</script>

<style scoped>
.json {
  text-align: left;
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}
</style>
